<template>
     <div class="mapBox">
          <div class="mapBox__header">
               <div class="content">
                    <el-radio-group v-model="activeTrack" @change="changeTrack">
                         <el-radio-button v-for="item in trackList" :key="item.trackid" :label="item.time" :value="item.time" />
                    </el-radio-group>
               </div>
          </div>
          <div class="mapContainer" id="mapContainer"></div>
     </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import mapConfig from './mapConfig'
import { GetAllLayers, SelectTracy } from '@/api/common'
import WKT from 'terraformer-wkt-parser'
let props = defineProps({
     meetRecord: {
          type: Array,
          default: () => {
               return []
          },
     },
     startTime: {
          type: String,
          default: '',
     },
     endTime: {
          type: String,
          default: '',
     },
})
const options = mapConfig()
let mapInstance: any = null
const initMap = () => {
     console.log('初始化地图')
     const mapDom = document.getElementById('mapContainer')
     if (mapDom) {
          mapInstance = options.initMap(mapDom)
     }
     getAllLayer()
     getTrackRecord()
     getEventRecord()
}
// 获取所有图层
const getAllLayer = async () => {
     const suToken = 'Z6-nSO1o77TrkFDvTthcE1n35TGuwLM8CaTEBL4_1dMY3ihMeWO0lXbzL5WxcWlwzzT8KS4UMvm5KUWZkb70mg'
     let res = await GetAllLayers()
     if (res && res.length > 0) {
          res.forEach((item: any) => {
               if (item.children && item.children.length > 0 && item.label === '线位及缓冲区') {
                    item.children.forEach((child: any) => {
                         options.AddSuperMapRailLayer(child.url, suToken, undefined, child.xlfilter, child.extent, mapInstance)
                    })
               }
          })
     }
}
// 根据事件记录 打点
const getEventRecord = async () => {
     if (props.meetRecord.length === 0) return
     let obj = props.meetRecord.map((item: any) => {
          return {
               ...item,
               coord: (WKT.parse(item.geom) as any).coordinates,
          }
     })
     // 新增事件图层
     if (!mapInstance.getLayerById('事件记录')) {
          options.addFeatureLayers(mapInstance, ['事件记录'])
     }
     mapInstance.getLayerById('事件记录').clear()
     obj.forEach((item) => {
          const graphic = options.addPointFeature(item.coord, item, '事件记录')
          mapInstance.getLayerById('事件记录').addGraphic(graphic)
     })
}
watch(
     () => props.meetRecord,
     () => {
          getEventRecord()
     },
     {
          deep: true,
     },
)
// 根据开始结束时间 获取对应的轨迹记录
const activeTrack = ref('')
const trackList: any = ref([])
const getTrackRecord = async () => {
     if (!props.startTime || !props.endTime) {
          return ElMessage.warning('当前数据暂无轨迹记录！')
     }
     const obj = {
          starttime: props.startTime,
          endtime: props.endTime,
          // starttime: '2025-01-09T01:00:00',
          // endtime: '2025-01-09T22:00:00',
     }
     let res = await SelectTracy(obj)
     if (!res) {
          return ElMessage.warning('当前数据暂无轨迹记录！')
     }
     if (res && res[0].Tracks) {
          trackList.value = res[0].Tracks.map((item: any) => {
               return {
                    ...item,
                    linePosition: (WKT.parse(item.pathGeom) as any).coordinates,
                    pointPosition: item.pathPoints.map((chi: any) => {
                         return {
                              ...chi,
                              position: [chi.lon, chi.lat],
                         }
                    }),
               }
          })
          activeTrack.value = trackList.value[0].time
          options.addFeatureLayers(mapInstance, ['轨迹'])
          addRoamFun()
     }
}

const addRoamFun = () => {
     const activeTrackItem = trackList.value.find((item: any) => item.time === activeTrack.value)
     options.addRoamGraphic(mapInstance, '轨迹', activeTrackItem.linePosition, activeTrack.value)
     activeTrackItem.pointPosition.forEach((item: any) => {
          options.addPointGraphic(mapInstance, '轨迹', item.position, item, activeTrack.value)
     })
}
const changeTrack = () => {
     mapInstance.getLayerById('轨迹').clear()
     addRoamFun()
}
const flytoGemotry = (gemo: any) => {
     options.getGemoToFly(mapInstance, gemo)
}
// 加载对应的轨迹数据
onMounted(() => {
     initMap()
})
onUnmounted(() => {
     mapInstance.destroy()
})
defineExpose({
     flytoGemotry,
})
</script>

<style lang="scss" scoped>
.mapBox {
     width: 100%;
     height: 100%;
     position: relative;
     display: flex;
     flex-direction: column;

     .mapBox__header {
          height: auto;
          margin-bottom: 10px;
          overflow-x: auto;
          width: 100%;

          .content {
               width: 500%;
               padding: 5px 0;
          }
     }

     .mapContainer {
          width: 100%;
          flex: 1;
          position: relative;
          overflow: hidden;
     }
}
</style>
